<template>
  <div>
    <div class="search-content">
      <i-col class="panel content-header" :span="24">
        <div class="title-bar cf">
          <h5 class="fl">
            <span>
              <a href="javascript:void(0);" class="link" @click="backToLast">
                <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a
              >
              <span class="dashboard-card-sep">|</span>
              <span class="dashboard-card-name"><span>日电流详情</span></span>
            </span>
          </h5>
        </div>
      </i-col>
    </div>
    <div>
      <Row>
        <i-col
          span="24"
          v-if="showTimeRange"
          style="padding:10px;box-sizing:border-box;"
        >
          <DatePicker
            :clearable="false"
            :options="options"
            v-model="timeDate"
            type="date"
            placeholder="请选择查询时间..."
            style="width: 220px"
            @on-change="onTimeChange"
          ></DatePicker>
        </i-col>
        <!-- 折线图 -->
        <i-col span="24" class="panel map-panel" style="margin-bottom:15px;">
          <div style="width:100%;height:350px;" class="blank-chart">
            <div ref="chart" style="width: 100%;height: 100%;"></div>
          </div>
        </i-col>
        <!-- 表格 -->
        <i-col
          class="panel table-panel"
          :span="24"
          style="overflow-x: auto;margin-bottom: 20px;"
        >
          <AnalTable
            :tableData="tableData"
            :tableStyle="{ width: '100%' }"
          ></AnalTable>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import AnalTable from "../AnalTable";
import { getNxCurrentDetail } from "@/api";
import mixin from "./mixin";

export default {
  mixins: [mixin],
  computed: { ...mapGetters(["color"]) },
  created() {
    const path = this.$route.path;
    if (path.indexOf("ontime") > -1) {
      this.showTimeRange = false;
    }
  },
  mounted() {
    this.getFuHeData();
  },
  components: { AnalTable },
  data: () => ({
    tableData: [],
    showTimeRange: true,
    echartInstence: null
  }),
  methods: {
    onTimeChange() {
      this.getFuHeData();
    },
    momentFormat(timesup) {
      return this.moment(timesup)
        .utc()
        .format("YYYY-MM-DD HH:mm:ss");
    },
    getFuHeData() {
      const vm = this,
        { id, name } = vm.$route.params;

      const timeDate = vm.timeDate,
        date = vm.moment(timeDate).format("YYYY-MM-DD"),
        params = {
          deviceNo: id,
          date
        };
      vm.$nextTick(() => {
        const dom = vm.$refs.chart;
        if (vm.echartInstence) {
          vm.echartInstence.clear();
        }
        vm.echartInstence = vm.echarts.init(dom);
        vm.echartInstence.showLoading({ text: "", color: "red" });
        getNxCurrentDetail(params).then(res => {
          const { data } = res;
          if (res.code === 200 && JSON.stringify(data) !== "{}") {
            vm.printMap(data, name, date);
            try {
              const tableData = [];

              if (data.AEMaxVal || data.AEMaxVal === 0) {
                tableData.push({
                  key: "A相最大电流",
                  value: `${data.AEMaxVal}(A) (${vm.momentFormat(
                    data.AEMaxDate
                  )})`
                });
              }

              if (data.AEMinVal || data.AEMinVal === 0) {
                tableData.push({
                  key: "A相最小电流",
                  value: `${data.AEMinVal}(A) (${vm.momentFormat(
                    data.AEMinDate
                  )})`
                });
              }

              if (data.BEMaxVal || data.BEMaxVal === 0) {
                tableData.push({
                  key: "B相最大电流",
                  value: `${data.BEMaxVal}(A) (${vm.momentFormat(
                    data.BEMaxDate
                  )})`
                });
              }

              if (data.BEMinVal || data.BEMinVal === 0) {
                tableData.push({
                  key: "B相最小电流",
                  value: `${data.BEMinVal}(A) (${vm.momentFormat(
                    data.BEMinDate
                  )})`
                });
              }

              if (data.CEMaxVal || data.CEMaxVal === 0) {
                tableData.push({
                  key: "C相最大电流",
                  value: `${data.CEMaxVal}(A) (${vm.momentFormat(
                    data.CEMaxDate
                  )})`
                });
              }
              if (data.CEMinVal || data.CEMinVal === 0) {
                tableData.push({
                  key: "C相最小电流",
                  value: `${data.CEMinVal}(A) (${vm.momentFormat(
                    data.CEMinDate
                  )})`
                });
              }

              if (data.ZeroEMaxVal || data.ZeroEMaxVal === 0) {
                tableData.push({
                  key: "零线最大电流",
                  value: `${data.ZeroEMaxVal}(A) (${vm.momentFormat(
                    data.ZeroEMaxDate
                  )})`
                });
              }

              if (data.ZeroEMinVal || data.ZeroEMinVal === 0) {
                tableData.push({
                  key: "零线最小电流",
                  value: `${data.ZeroEMinVal}(A) (${vm.momentFormat(
                    data.ZeroEMinDate
                  )})`
                });
              }
              vm.tableData = [...tableData];
            } catch (e) {
              return false;
            }
          } else {
            vm.echartInstence.setOption({
              title: {
                text: "暂无数据",
                textStyle: {
                  fontSize: 28,
                  fontWeight: "normal"
                },
                left: "center",
                top: "center"
              }
            });
            vm.echartInstence.hideLoading();
            vm.tableData = [
              {
                key: "A相最大电流",
                value: `-`
              },
              {
                key: "A相最小电流",
                value: `-`
              },
              {
                key: "B相最大电流",
                value: `-`
              },
              {
                key: "B相最小电流",
                value: `-`
              },
              {
                key: "C相最大电流",
                value: `-`
              },
              {
                key: "C相最小电流",
                value: `-`
              },
              {
                key: "零线最大电流",
                value: `-`
              },
              {
                key: "零线最小电流",
                value: `-`
              }
            ];
          }
        });
      });
    },

    printMap(data, name, date) {
      const vm = this,
        { AEList, BEList, CEList, ZeroEList } = data;
      let A = [],
        B = [],
        C = [],
        Zero = [];
      if (AEList) {
        A = AEList.map(t => t.value);
      }
      if (BEList) {
        B = BEList.map(t => t.value);
      }

      if (CEList) {
        C = CEList.map(t => t.value);
      }

      if (ZeroEList) {
        Zero = ZeroEList.map(t => t.value);
      }
      const isExistArray = [AEList, BEList, CEList, ZeroEList].find(t => !!t);
      let xRay = [];
      if (isExistArray && isExistArray.length > 0) {
        xRay = isExistArray.map(t =>
          vm
            .moment(t.createdAt)
            .utc()
            .format("HH:mm:ss")
        );
      }

      const option = {
        title: {
          text: name,
          left: "center",
          subtext: date
        },
        color: [...this.color],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          bottom: 0
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "50"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xRay
        },
        yAxis: {
          name: "单位(A)",
          type: "value"
        },
        series: [
          {
            type: "line",
            name: "A相",
            data: A
          },
          {
            type: "line",
            name: "B相",
            data: B
          },
          {
            type: "line",
            name: "C相",
            data: C
          },
          {
            type: "line",
            name: "零线",
            data: Zero
          }
        ]
      };
      vm.echartInstence.setOption(option);
      vm.echartInstence.hideLoading();
    },

    backToLast() {
      this.$router.go(-1);
    }
  }
};
</script>
